<template>
  <div style="height: 100%; width: 100%; z-index: 2; position: absolute">
    <div ref="lineCanvas" style="height: 100%; width: 100%"></div>
  </div>
</template>

<script>
import { resize } from "./resize"
export default {
  mixins: [resize],
  data() {
    return {};
  },
  props: {
    lineObj: {
      type: Object,
      default: () => ({}),
    },
    trendTimeArea: {},
  },
  data(){
    return {
      myChart: null,
    }
  },
  watch: {
    lineObj: {
      immediate: true,
      handler(val) {
        if (val.className != "lineCanvas") {
          setTimeout(() => {
            this.getLine(val);
          }, 300);
        }
      },
    },
  },
  methods: {
    getLine(val) {
      let data = [];
      let max = "";
      let min = "";
      val.dataDtlList.map((item, index) => {
        data.push(item.data);
        max = Math.max.apply(null, data);
        min = Math.min.apply(null, data);
      });
      this.myChart = this.$echarts.init(this.$refs.lineCanvas);
      let option = {
        title: {
          text: val.areaName,
          textStyle: {
            fontStyle: "normal", //风格
            fontWeight: "normal", //粗细
            fontSize: 14, //大小
          },
          x: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            var res =
              params[0].name.substring(0, 2) +
              "年" +
              params[0].name.substring(2, 4) +
              "月";
            for (var i = 0; i < params.length; i++) {
              res +=
                "<br>" +
                params[i].marker +
                "20" +
                res +
                "完成" +
                params[i].value +
                "万元";
            }
            return res;
          },
        },
        grid: {
          left: "0px",
          right: "0px",
          bottom: "20px",
          top: "40px",
        },
        xAxis: {
          type: "category",
          data: this.trendTimeArea,
          axisLabel: {
            interval: 0,
            // rotate:40 ,
            textStyle: {
              // color: '#c3dbff',  //更改坐标轴文字颜色
              fontSize: 10, //更改坐标轴文字大小
            },
          },
        },
        yAxis: {
          type: "value",
          // min: minNumber,
          splitLine: { show: false }, //去除网格线
          max: max,
          min: min,
          // // interval: 50,
          axisLabel: {
            formatter: "{value} 万元",
            show: false,
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "transparent",
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
        },

        series: {
          type: "line",
          smooth: true,
          data: data,
          lineStyle: {
            normal: {
              color: "#00b050", // 线条颜色
              width: 0.8,
            },
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#00b050",
                  fontSize: 8,
                },
              },
            },
          },
        },
      };
      this.myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>
